<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="">
        <el-input
          clearable
          @clear="search()"
          v-model="pageDto.where.deptName"
          placeholder="请输入部门名称"
        ></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="search()"
        >查询</el-button
      >
      <el-button
        type="success"
        icon="el-icon-circle-plus-outline"
        @click="findDepts()"
        >添加部门</el-button
      >
      <el-button type="danger" @click="batchDelete()" icon="el-icon-delete"
        >批量删除</el-button
      >
    </el-form>
    <el-table
      ref="multipleTable"
      :data="sysDeptList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @select="selectItem"
      @select-all="selectAll"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="deptId" label="部门Id" width="120">
      </el-table-column>
      <el-table-column prop="deptName" label="部门名称"> </el-table-column>
      <el-table-column prop="leader" label="负责人"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="status" label="部门状态">
        <template slot-scope="scope">
          <div>
            {{ scope.row.status | stateFilter }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="创建者"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <div>
            <el-button
              @click="handleEdit(scope.row)"
              type="primary"
              size="mini"
              icon="el-icon-edit"
              >修改</el-button
            >
            <el-button
              @click="handleDelete(scope.row.deptId)"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-switch
            style="display: block"
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="开启"
            inactive-text="停用"
            active-value="0"
            inactive-value="1"
            @change="setStatus(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right"
      :current-page="pageDto.now"
      :page-sizes="[5, 10, 50, 100]"
      :page-size="pageDto.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加的弹出 -->
    <el-dialog title="添加部门" :visible.sync="outerVisible">
      <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body
      >
      </el-dialog>
      <el-form :rules="rules" :model="repo" ref="repoRef">
        <el-form-item label="公司列表">
          <el-select placeholder="请选择公司" v-model="deptAddList.deptId">
            <el-option
              v-for="item in parentDeptArr"
              :key="item.deptName"
              :label="item.deptName"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门名称" prop="remark">
          <el-input
            autocomplete="off"
            v-model="deptAddList.deptName"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="remark">
          <el-input autocomplete="off" v-model="deptAddList.leader"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="remark">
          <el-input autocomplete="off" v-model="deptAddList.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="remark">
          <el-input autocomplete="off" v-model="deptAddList.email"></el-input>
        </el-form-item>
        <el-form-item label="创建者" prop="remark">
          <el-input
            autocomplete="off"
            v-model="deptAddList.createBy"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDepts()">提交</el-button>
      </div>
    </el-dialog>

    <!-- 修改的弹出 -->
    <el-dialog title="修改部门" :visible.sync="outerVisible1">
      <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body
      >
      </el-dialog>
      <el-form :rules="rules" :model="repo" ref="repoRef">
        <el-form-item label="公司列表">
          <el-select placeholder="请选择公司" v-model="deptAddList.parentId">
            <el-option
              v-for="item in parentDeptArr"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门名称" prop="remark">
          <el-input
            autocomplete="off"
            v-model="deptAddList.deptName"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="remark">
          <el-input autocomplete="off" v-model="deptAddList.leader"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="remark">
          <el-input autocomplete="off" v-model="deptAddList.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="remark">
          <el-input autocomplete="off" v-model="deptAddList.email"></el-input>
        </el-form-item>
        <!-- <el-form-item label="状态" prop="remark">
          <el-input autocomplete="off" v-model="deptAddList.email"></el-input>
        </el-form-item> -->

        <el-form-item label="创建者" prop="remark">
          <el-input
            autocomplete="off"
            v-model="deptAddList.createBy"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateDepts()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import {
  findPage,
  findDepts,
  addDept,
  deleteDept,
  deleteDepts,
  update,
  updateStatus,
} from "@/api/dept";

export default {
  data() {
    return {
      sysDeptList: [],
      pageDto: {
        now: 1,
        size: 5,
        where: {
          deptName: "",
        },
      },
      total: 0,
      outerVisible: false,
      outerVisible1: false,
      parentDeptArr: [],
      deptAddList: {},
      selectDept: [],
      value2: "0",
    };
  },
  methods: {
    search() {
      findPage(this.pageDto).then((res) => {
        // this.pageDto.now = 1;
        this.sysDeptList = res.list;
        this.total = res.total;
      });
    },
    handleSizeChange(size) {
      this.pageDto.size = size;
      this.search();
    },
    handleCurrentChange(page) {
      this.pageDto.now = page;
      this.search();
    },
    handleAdd() {
      this.outerVisible = true;
    },
    findDepts() {
      findDepts().then((res) => {
        this.deptAddList = {};
        this.outerVisible = true;
        this.parentDeptArr = res.data;
      });
    },
    addDepts() {
      addDept(this.deptAddList).then((res) => {
        this.pageDto.now = 1;
        this.outerVisible = false;
        this.search();
      });
    },
    handleDelete(deptId) {
      this.$confirm("此操作将永久删除该部门，是否删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteDept(deptId).then((res) => {
          if (res.code == 0) {
            this.search();
            this.pageDto.now = 1;
          }
          this.$message({
            message: res.msg,
            type: res.code == 0 ? "success" : "error",
          });
        });
      });
    },
    selectAll(selection) {
      this.selectDept = selection;
    },
    selectItem(selection, row) {
      this.selectDept = selection;
    },
    batchDelete() {
      this.$confirm("此操作将永久删除该部门，是否删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteDepts(this.selectDept).then((res) => {
          if (res.code == 0) {
            this.search();
            this.pageDto.now = 1;
          }
          this.$message({
            message: res.msg,
            type: res.code == 0 ? "success" : "error",
          });
        });
      });
    },
    updateDepts() {
      update(this.deptAddList).then((res) => {
        this.outerVisible1 = false;
        this.pageDto.now = 1;
        this.search();
      });
    },
    handleEdit(row) {
      findDepts().then((res) => {
        this.outerVisible1 = true;
        this.parentDeptArr = res.data;
        this.deptAddList = row;
      });
    },
    setStatus(row) {
      updateStatus(row.deptId, row.status).then((res) => {
        this.sysDeptList.status = res.data.status;
      });
    },
  },
  created() {
    this.search();
    // this.findDepts();
  },
};
</script>
  
  <style></style>
  